<!DOCTYPE html>
<html>
<head>
    <title>博客</title>
    <link rel="stylesheet" type="text/css" href="/thinkphp-practice/public/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/thinkphp-practice/public/static/css/index.css">
    <script src="/thinkphp-practice/public/jquery-3.3.1.min.js"></script>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
</head>
<body style="background: #F8F8F8">
<!--导航栏开始-->
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top col-xs-12 col-lg-12">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#demo-navbar" aria-expanded="false">
                <span class="sr-only">Mc猴子博客</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="{:url('index/index/index')}"><span class="glyphicon glyphicon-piggy-bank" style="color:#5bc0de"></span><span style="color:#5bc0de">Mc猴子博客</span></a>
        </div>
        <div class="collapse navbar-collapse" id="demo-navbar">
            <ul class="nav navbar-nav">
                <li class="active"><a href="{:url('index/index/index')}">首页 <span class="sr-only">(current)</span></a></li>
                {foreach name="category" item="vo"}
                <li><a href="{:url('index/index/category',['cid'=>$vo.cid])}">{$vo.cat_name}</a></li>
                {/foreach}
                <li><a href="#" data-toggle="modal" data-target="#myModal">关于</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right" id="loginarea">
                <!--<li class="dropdown">-->
                    <!--<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-user"></span> 欢迎您，{$username}</a>-->
                    <!--<ul class="dropdown-menu">-->
                        <!--<li><a href="#">个人信息</a></li>-->
                        <!--<li><a href="{:url('login/logout')}">退出</a></li>-->
                    <!--</ul>-->
                <!--</li>-->
                {php}
                    if(isset($_SESSION['token'])){
                {/php}
                    <li id="loginsuccess">
                        <div>
                            <img src="{$user_message.profile_image_url}" alt="{$user_message.screen_name}" style="width: 45px;height: 45px;margin-top:3px">
                            <span style="color: white">{$user_message.screen_name}</span>&nbsp;<a href="javascript:;" style="color:#5bc0de" id="logout">退出</a>
                        </div>
                    </li>
                {php}
                    }else{
                {/php}
                        <li id="nologin"><a href="#" data-toggle="modal" data-target="#loginmodal">登录</a></li>
                {php}
                    }
                {/php}

            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<!--导航栏结束-->
<!-- 模态框Modal开始 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    关于Mc 猴子
                </h4>
            </div>
            <div class="modal-body text-center">
                <h5>一个喜欢php的人，花括号不换行的人</h5>
                <h4>微信：</h4><img src="/thinkphp-practice/public/static/img/QRcode.jpg" alt="微信"  class="img-rounded" style="width: 45%;height: 45%" >
                <h4>微博：</h4><a href="https://weibo.com/u/2344669250">https://weibo.com/u/2344669250</a>
                <h4>Github：</h4><a href="https://github.com/jyhmc0814">https://github.com/jyhmc0814</a>
                <h4>码云：</h4><a href="https://git.oschina.net/jyhmc/thinkphp-practice">https://git.oschina.net/jyhmc/thinkphp-practice</a>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-info" data-dismiss="modal">关闭
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!--模态框Modal 结束-->

<!-- 登录模态框Modal开始 -->
<div class="modal fade" id="loginmodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabe2" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabe2">
                    登录
                </h4>
            </div>
            <div class="modal-body text-center">
                <a href="{$code_url}"><img src="/thinkphp-practice/public/static/img/weibo_login.png" alt="微博"  class="img-rounded" style="" ></a>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-info" data-dismiss="modal">关闭
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!--登录模态框Modal 结束-->

<script>
    $(document).ready(function(){

        $('#logout').click(function(){
            $.ajax({
                type: 'post',
                url:"{:url('index/index/logout')}",
                data:{
                    status:'logout'
                },
                datatype:'json',
                success:function(msg){
                    var div = "<li id=\"nologin\"><a href=\"#\" data-toggle=\"modal\" data-target=\"#loginmodal\">登录</a></li>";
                    $("#loginarea").html();
                    $('#loginarea').html(div);
                    alert('退出成功');

                },
                error: function (msg) {
                    alert('退出失败');
                }
            })
        });


    })
</script>